<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="纵坐标过滤字段" prop="verticalfield">
      <el-input v-model="dataForm.verticalfield" placeholder="纵坐标过滤字段"></el-input>
    </el-form-item>
    <el-form-item label="横坐标字段" prop="horizontalfield">
      <el-input v-model="dataForm.horizontalfield" placeholder="横坐标字段"></el-input>
    </el-form-item>
    <el-form-item label="数据包id" prop="dataid">
      <el-input v-model="dataForm.dataid" placeholder="数据包id"></el-input>
    </el-form-item>
    <el-form-item label="显示方式1 饼图 2 柱状图 3 折线图 4 表格" prop="showtype">
      <el-input v-model="dataForm.showtype" placeholder="显示方式1 饼图 2 柱状图 3 折线图 4 表格"></el-input>
    </el-form-item>
    <el-form-item label="统计类型 1 求和 2 求平均值 3求最大值" prop="staticstype">
      <el-input v-model="dataForm.staticstype" placeholder="统计类型 1 求和 2 求平均值 3求最大值"></el-input>
    </el-form-item>
    <el-form-item label="水平坐标" prop="xpos">
      <el-input v-model="dataForm.xpos" placeholder="水平坐标"></el-input>
    </el-form-item>
    <el-form-item label="垂直坐标" prop="ypos">
      <el-input v-model="dataForm.ypos" placeholder="垂直坐标"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          verticalfield: '',
          horizontalfield: '',
          dataid: '',
          showtype: '',
          staticstype: '',
          xpos: '',
          ypos: ''
        },
        dataRule: {
          verticalfield: [
            { required: true, message: '纵坐标过滤字段不能为空', trigger: 'blur' }
          ],
          horizontalfield: [
            { required: true, message: '横坐标字段不能为空', trigger: 'blur' }
          ],
          dataid: [
            { required: true, message: '数据包id不能为空', trigger: 'blur' }
          ],
          showtype: [
            { required: true, message: '显示方式1 饼图 2 柱状图 3 折线图 4 表格不能为空', trigger: 'blur' }
          ],
          staticstype: [
            { required: true, message: '统计类型 1 求和 2 求平均值 3求最大值不能为空', trigger: 'blur' }
          ],
          xpos: [
            { required: true, message: '水平坐标不能为空', trigger: 'blur' }
          ],
          ypos: [
            { required: true, message: '垂直坐标不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/report/panelpackage/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.verticalfield = data.panelPackage.verticalfield
                this.dataForm.horizontalfield = data.panelPackage.horizontalfield
                this.dataForm.dataid = data.panelPackage.dataid
                this.dataForm.showtype = data.panelPackage.showtype
                this.dataForm.staticstype = data.panelPackage.staticstype
                this.dataForm.xpos = data.panelPackage.xpos
                this.dataForm.ypos = data.panelPackage.ypos
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/report/panelpackage/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'verticalfield': this.dataForm.verticalfield,
                'horizontalfield': this.dataForm.horizontalfield,
                'dataid': this.dataForm.dataid,
                'showtype': this.dataForm.showtype,
                'staticstype': this.dataForm.staticstype,
                'xpos': this.dataForm.xpos,
                'ypos': this.dataForm.ypos
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
